<template>
  <div class="option" :style="style">
    <input type="text" class="flex-center transition" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" placeholder="点击输入" />
    <span class="option-span" :class="{ checkbox: styleType === QUESTION_TYPE_MULTI }"></span>
    <span class="del svg" @click="del">
      <svg t="1657767302865" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2276" width="200" height="200">
        <path d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z" p-id="2277"></path>
        <path d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z" p-id="2278"></path>
      </svg>
    </span>
    <span class="border transition"></span>
  </div>
</template>

<script>
import { QUESTION_TYPE_MULTI } from '@/constants/default'

export default {
  emits: ['update:modelValue', 'delete'],
  props: {
    style: Object,
    modelValue: String,
    optionIndex: Number,
    styleType: String, // 判断渲染成圆型还是矩形
  },
  data() {
    return {
      QUESTION_TYPE_MULTI,
    }
  },
  methods: {
    del() {
      this.$emit('delete', this.optionIndex)
    },
  },
}
</script>

<style lang="scss" scoped>
.option {
  width: 90%;
  height: 30px;

  margin: 10px auto;
  position: relative;

  border-radius: 4px;

  > .option-span {
    width: 14px;
    height: 14px;
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 12px;
    box-sizing: border-box;
    border-radius: 100%;
    border: 2px solid #cbd5de;
    &.checkbox {
      border-radius: 4px;
    }
  }

  > input {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    padding: 0 30px;

    border: 1px solid transparent;
    border-radius: 2px;
    background-color: transparent;

    font-size: 14px;

    &:hover ~ .border {
      border: 1px dashed #448cff;
      background-color: #f1f5fc;
    }
    &:focus ~ .border {
      border: 1px solid #448cff;
      background-color: #e9f1ff;
    }
  }

  > .del {
    position: absolute;
    z-index: 3;
    width: 20px;
    height: 20px;
    top: 5px;
    right: 4px;
    cursor: pointer;

    &:hover {
      fill: #448cff;
    }
    &:hover ~ .border {
      border: 1px dashed #448cff;
    }
  }

  > .border {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    padding-left: 25px;
    box-sizing: border-box;

    border: 1px solid transparent;
    border-radius: 2px;
  }
}
</style>
